<!-- 菜单栏 -->
<template>
  <div class="menubar">
    <!-- f1空白条 -->
    <div class="f1"></div>
    <!-- f2搜索栏 -->
    <el-row class="f2">
      <el-col :span="6" class="f2-1"></el-col>
      <el-col :span="12" class="f2-2"></el-col>
      <el-col :span="6" class="f2-3"></el-col>
    </el-row>
    <!-- f3菜单栏 -->
    <el-row class="f3">
      <el-col :offset="6" :span="6" class="f3-1">123456</el-col>
    </el-row>
    <!-- f4菜单栏 -->
    <el-row class="f4">
      <el-col :span="18" class="f4-1">123456</el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.menubar {
  width: 100%;
  height: 135px;
  //背景
  background-color: var.$menu-background-color;
  border: 1px solid black;
  .f1 {
    height: 30px;
    width: 100%;
    border: 1px solid black;
  }
  .f2 {
    height: 50px;
    width: 100%;
    border: 1px solid black;
    .f2-1,
    .f2-2,
    .f2-3 {
      height: 100%;
      width: 100%;
      border: 1px solid rgb(47, 6, 196);
    }
  }
  .f3 {
    height: 30px;
    width: 100%;
    border: 1px solid rgb(47, 6, 196);
    .f3-1 {
      height: 100%;
      width: 100%;
      border: 1px solid rgb(47, 6, 196);
    }
  }
  .f4 {
    height: 30px;
    width: 100%;
    border: 1px solid rgb(47, 6, 196);
      .f4-1 {
      height: 100%;
      width: 100%;
      margin-left: 188px;
      border: 1px solid rgb(47, 6, 196);
    }
  }
}
</style>
